<template>
	<view class="content">
		<view class="info">
			<view class="digitalAmt">￥ {{ data.price }}</view>
			<view class="image"><image :src="data.picture" mode="aspectFill"></image></view>
			<view class="right">
				<text class="text">{{ data.name }}</text>
				<view class="text1">
					<text v-if="data.plate">{{ data.plate | hide }}</text>
					<text>{{ data.traffic }}</text>
				</view>
				<view class="text2">我总在意流云与星群的坐标，一朵花开谢的时日，原野与平川一望无垠是否平展。哪知你轻轻抬起眉梢，竟赐予我一生大好河山。</view>
			</view>
		</view>
		<view class="detlbox ">
			<view class="info1 f a-c j-f">费用明细</view>
			<view class="info2 f j-b a-c">
				<text>车辆租金 :</text>
				<text class="t-price">{{ data.cost.rent }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>车辆押金 :</text>
				<text class="t-price">{{ data.cost.deposit }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>违章押金 :</text>
				<text class="t-price">{{ data.cost.illegal }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>增值费用 :</text>
				<text class="t-price">{{ data.cost.cost }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>合计 :</text>
				<text class="t-price">{{ data.money }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>定金 :</text>
				<text class="t-price">{{ data.deposit }}</text>
			</view>
		</view>

		<view class="detlbox" v-if="is_status == 8">
			<view class="info1 f a-c j-f">车辆故障</view>
			<view class="info2 f j-b a-c">
				<text>申请人姓名 :</text>
				<text>{{ malfunction.failure.name }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>申请人手机号码 :</text>
				<text>{{ malfunction.failure.phone }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>故障地点 :</text>
				<text>{{ malfunction.failure.site }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>故障原因 :</text>
				<text>{{ malfunction.failure.cause }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>申请时间 :</text>
				<text>{{ malfunction.failure.time }}</text>
			</view>

			<view class="info3 ">
				<text>故障图集 :</text>
				<view class="imag">
					<block v-for="(item, index) in malfunction.failure_img" :key="index"><image :src="item" mode=""></image></block>
				</view>
			</view>
		</view>

		<view class="detlbox" v-if="is_status == 7">
			<view class="info1 f a-c j-f">提前还车</view>
			<view class="info2 f j-b a-c">
				<text>申请人姓名 :</text>
				<text>{{ retCar.name }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>申请人手机号码 :</text>
				<text>{{ retCar.phone }}</text>
			</view>
			<view class="info2 f j-b a-c">
				<text>还车地点 :</text>
				<text>{{ retCar.site }}</text>
			</view>

			<view class="info2 f j-b a-c">
				<text>还车时间 :</text>
				<text>{{ retCar.time }}</text>
			</view>
		</view>
		<view class="deliveryCarPhotos" v-if="is_status == 1">
			<view class="head">
				<text class="text">送车照片</text>
				<text class="text1">{{ data.time_take }}</text>
			</view>
			<view class="henxian"></view>

			<view class="box">
				<view class="image"><image :src="data.send[0]" mode="aspectFill"></image></view>
				<view class="image1"><image :src="data.send[1]" mode="aspectFill"></image></view>
			</view>
		</view>
		
		<view class="renting red" v-if="is_status == 5" @click="sndCarPhoto">送车拍照</view>
		<view class="renting red" v-if="is_status == 6 || is_status == 7" @click="sndCarPhoto">还车拍照</view>
		<view class="renting red" v-if="is_status == 8" @click="confirmFailure">确认</view>
		<view class="renting red" v-if="is_status == 10" @click="confirmRfnd">确认退款</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			oid: '', // 订单id
			data: {},
			is_status: '',
			malfunction: {},
			retCar: {}
		};
	},
	onLoad(oid) {
		var oid = JSON.parse(oid.oid);
		this.uid = getApp().globalData.uid;
		this.oid = oid.oid; // 订单id

		this.is_status = oid.is_status;
		console.log('this.is_status :>> ', this.is_status);
		this.getOrdrDetails();
		this.faultLst();
		this.retTheCarErly();
	},
	methods: {
		async faultLst() {
			let obj = {
				oid: this.oid
			};
			const res = await this.$u.post('api/user/user_order_details', obj, {});
			this.malfunction = res.data;
			console.log('车辆故障列表 >>  ', res);
		},
		async confirmFailure() {
			let obj = {
				oid: this.oid
			};
			const res = await this.$u.post('api/user/user_order_update', obj, {});
			console.log('确认车辆故障 >>  ', res);
			uni.$showMsg(res.msg);
			setTimeout(function() {
				
				
				uni.redirectTo({
					url: '../../../subPages/ordrEditing/ordrEditing'
				});
			}, 500);
		},
		async retTheCarErly() {
			let obj = {
				oid: this.oid
			};
			const res = await this.$u.post('api/user/user_car_also', obj, {});
			this.retCar = res.data;
			console.log('提前还车列表 >>  ', res);
		},

		async confirmRfnd() {
			const res = await this.$u.post('api/user/user_car_refund', {
				uid: uni.getStorageSync('uid'),
				oid: this.oid
			});
			
			uni.redirectTo({
				url: '../../../subPages/ordrEditing/ordrEditing'
			});
			uni.$showMsg(res.msg);
		},
		sndCarPhoto() {
			var obj = {
				is_status: this.is_status,
				oid: this.oid
			};
			uni.navigateTo({
				url: '../../../subPages/sendCartTakephoto/sendCartTakephoto?oid=' + JSON.stringify(obj)
			});
		},
		async getOrdrDetails() {
			const res = await this.$u.post('api/car/car_order_details', {
				oid: this.oid // 订单
			});

			this.data = res.data;
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	padding: 24rpx 20rpx;
	background-color: #000000;
	padding-bottom: 150rpx;
	.red {
		color: red !important;
	}
	.deliveryCarPhotos {
		width: 710rpx;
		height: 346rpx;
		background: #2a2929;
		border-radius: 15rpx;
		margin-top: 25rpx;
		padding: 30rpx 22rpx;
		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 34rpx;
			.text {
				height: 34rpx;
				line-height: 34rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
			.text1 {
				height: 23rpx;
				line-height: 23rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.henxian {
			width: 670rpx;
			height: 2rpx;
			background: #6e6e6e;
			margin-top: 30rpx;
		}
		.box {
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			.image,
			.image1 {
				width: 320rpx;
				height: 200rpx;
				background-color: #2a2929;
				//background-color: red;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.renting {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 710rpx;
		height: 100rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background: #2a2929;
		border-radius: 10rpx;
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
	.leaseRnwl {
	}
	.info {
		width: 710rpx;
		height: 231rpx;
		background: #2a2929;
		border-radius: 15rpx;
		margin: 0 auto;
		padding: 16rpx;
		display: flex;
		position: relative;
		.digitalAmt {
			position: absolute;
			right: 32rpx;
			bottom: 29rpx;

			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #d60000;
		}

		.image {
			width: 214rpx;
			height: 198rpx;
			border-radius: 10rpx;
			image {
				width: 214rpx;
				height: 198rpx;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			margin-left: 25rpx;
			.text {
				height: 36rpx;
				font-size: 38rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #fdfdfd;
				line-height: 36rpx;
			}
			.text1 {
				margin-top: 20rpx;
				text {
					display: inline-block;
					padding: 4rpx 17rpx;
					//line-height: 31rpx;
					text-align: center;
					background: #dcdcdc;
					border-radius: 16rpx;
					margin-right: 10rpx;

					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #1e2024;
				}
			}
			.text2 {
				width: 230rpx;
				height: 54rpx;
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
				line-height: 26rpx;
				overflow: scroll;
				margin-top: 22rpx;
			}
		}
	}
	.detlbox {
		background-color: #2a2929;
		padding: 30rpx 21rpx;
		margin-top: 25rpx;
		border-radius: 15rpx;
		.info1 {
			height: 100rpx;

			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			//border-bottom: 1rpx solid #737373;
		}
		.info2 {
			height: 60rpx;
			text:nth-child(1) {
				//height: 28rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
			text:nth-child(2) {
				//height: 23rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #d60000;
			}
		}
		.info3 {
			text {
				//height: 28rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
			.imag {
				width: 100%;

				padding: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				image {
					background-color: #cccccc;
					width: 300rpx;
					height: 200rpx;
					border-radius: 10rpx;
					margin-bottom: 25rpx;
				}
			}
		}
	}
}
</style>
